module.exports = {
  canvas,
}

function canvas(data) {
  let ctx = wx.createCanvasContext(data.canvasId);
  var systemInfo = wx.getSystemInfoSync();
  var windowWidth = systemInfo.windowWidth;
  var windowHeight = systemInfo.windowHeight;

  // 设置ctx到data
  data.ctx = ctx;
  // 设置响应转换
  data.getSize = (new UIToReality(windowWidth)).transitionUI;
  // 设置画布的宽高到data
  data.width = windowWidth;
  data.height = windowHeight;

  // 画板改变
  if (data.changeSize) data.changeSize({
    width: data.width,
    height: data.height,
  });

  // 保存为图片
  this.canvasToTempFilePath = function (callback) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      canvasId: data.canvasId,
      success: function (res) {
        if (callback) {
          callback(res.tempFilePath);
        } else {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功',
                duration: 1000
              })
            }
          })
        }
      }
    })
  }

  this.canvasData = function (d) {
    data.data = d;
    that.drawBg(data,ctx);
    // that.drawFont(data,ctx);
    // that.drawHead(data,ctx);
    // that.drawUser(data,ctx);
  }

  // 填充背景色及背景大小
  // canvaBg(data);
}

// 绘制背景图
function drawBg(data,ctx) {
  const that = this;
  var path = data.challengePostersBg;
  //这个地方的图片是需要注意，图片需要下载不然，手机上不能正常显示
  ctx.drawImage(path, 0, 0, data.width, data.height);
  // ctx.draw(true, function () {
  //   console.log('背景绘制完毕')
  // })
}

function drawFont(data,ctx) {
  const that = this;
  ctx.setFillStyle('#ffffff')
  ctx.font = 'normal normal 12px zihun35hao-jindianyahei';
  ctx.setFontSize(data.getSize(60));
  ctx.setTextBaseline('top');
  var text = '我正在参与谁变健身';
  const titleWidth = ctx.measureText(text).width;
  ctx.fillText(text, data.width / 2 - titleWidth / 2, data.getSize(160));
  const nameWidth = ctx.measureText(data.awardData.matchSchuduleName).width;
  ctx.fillText(data.awardData.matchSchuduleName, data.width / 2 - nameWidth / 2, data.getSize(270));

  that.setAdress(data,ctx);
  // ctx.draw(true, function () {
  //   console.log('背景绘制完毕')
  // })
}

function setAdress(data,ctx) {
  const that = this;
  ctx.setTextBaseline('bottom');
  ctx.setFontSize(data.getSize(80));
  var money = ctx.measureText(data.awardData.rewardAmount).width;
  ctx.setFontSize(data.getSize(40));
  var getWidth = ctx.measureText('获得').width;
  var awardName = data.awardData.prizeType == 1 ? '元超级大奖' : data.awardData.prizeType == 2 ? '元幸运大奖' : data.awardData.prizeType == 3 ? '元优秀奖' : '现金';
  var awardNameWidth = ctx.measureText(awardName).width;

  var totalWidth = money + getWidth + awardNameWidth + data.getSize(16);
  ctx.fillText('获得', data.width / 2 - totalWidth / 2, data.getSize(460));
  ctx.setFontSize(data.getSize(80));
  ctx.setFillStyle('#FFD017');
  ctx.fillText(data.awardData.rewardAmount, data.width / 2 - totalWidth / 2 + getWidth + data.getSize(8), data.getSize(465));
  ctx.setFillStyle('#ffffff')
  ctx.setFontSize(data.getSize(40));
  ctx.fillText(awardName, data.width / 2 - totalWidth / 2 + getWidth + money + data.getSize(16), data.getSize(460));
  // ctx.draw(true, function () {
  //   console.log('背景绘制完毕')
  // })
}

function drawUser(data,ctx) {
  const that = this;
  ctx.drawImage(data.qcode, data.width - data.getSize(200), data.height - data.getSize(330), data.getSize(100), data.getSize(100));
  ctx.font = 'normol normol 16px PingFang SC';
  ctx.setTextBaseline('top');
  ctx.setFontSize(data.getSize(30));
  ctx.fillText(data.awardData.username, data.getSize(200), data.height - data.getSize(310));
  if (data.awardData.receiveTime) {
    var time = data.awardData.receiveTime.split(' ');
    ctx.fillText(time[0], data.getSize(200), data.height - data.getSize(270));
  }
  // ctx.draw(true, function () {
  //   console.log('背景绘制完毕')
  // })
}

function drawHead(data,ctx) {
  const that = this;
  if (!data.awardData.headPortrait) return;
  wx.downloadFile({
    url: data.awardData.headPortrait,
    success: function (res) {
      // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
      if (res.statusCode === 200) {
        var imgUrl = res.tempFilePath;
        ctx.save();
        ctx.arc(data.getSize(130), data.height - data.getSize(280), data.getSize(50), 0, 2 * Math.PI)
        ctx.fill();
        ctx.clip();
        ctx.drawImage(imgUrl, data.getSize(80), data.height - data.getSize(330), data.getSize(100), data.getSize(100));
        // ctx.drawImage(imgUrl, 160, 160, 50, 50);
        ctx.restore();
        ctx.draw(true, function () {
          console.log('背景绘制完毕')
        });
      }
    }
  })
}


// 响应式转换对象(ui750转实际px)
function UIToReality(windowWidth) {

  this.transitionUI = function (size = 750) {
    return size / 750 * windowWidth;
  }

}